<!DOCTYPE html>
<html>

<head>
    <title>Bui 框架 富文本编辑器 SSM框架开发</title>
    <meta charset="UTF-8">
    <meta name="keywords"
        content="富文本编辑器、树形列表、树形控件、树控件、手风琴、拾色器、多文件上传、弹窗组件、模态窗口、双向联动表单、右键菜单、jquery拖动、draggable、datagrid、tree、mvvm、combox、tab" />
    <meta name="description"
        content="Bui editor ui框架是一套前后端分离，包含富文本编辑器、双向联动表单、树形列表、树形控件、模态窗口、手风琴、拾色器、多文件上传、弹窗组件等全功能UI框架。还包括Spring mvc spring mybatis高效开发框架" />
    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="bookmark" href="/favicon.ico" />
    <meta name="renderer" content="webkit|ie-stand" />
    <link type="text/css" rel="stylesheet" lang="stylesheet" href="../theme/default/base.css" />
    <link type="text/css" rel="stylesheet" lang="stylesheet" href="../theme/default/table.css" />
    <link type="text/css" rel="stylesheet" lang="stylesheet" href="../theme/default/toolbar.css" />
    <link type="text/css" rel="stylesheet" lang="stylesheet" href="../theme/default/panel.css" />
    <link type="text/css" rel="stylesheet" lang="stylesheet" href="../theme/default/pagination.css" />
    <link type="text/css" rel="stylesheet" lang="stylesheet" href="../theme/font/bui-fonts.min.css" />
    <script type="text/javascript" src="../javascript/basic-2.0.0.js"></script>
    <script type="text/javascript" src="../javascript/plugins-2.0.0.js"></script>
    <script type="text/javascript" src="../javascript/panel-2.0.0.js"></script>
    <script type="text/javascript" src="../javascript/toolbar-2.0.0.js"></script>
    <script type="text/javascript" src="../javascript/pagination-2.0.0.js"></script>
    <script type="text/javascript" src="../javascript/table-2.0.0.js"></script>
    <script type="text/javascript" src="table_data.js"></script>
    <script type="text/javascript" src="lang_config.js"></script> 
    <style>
        body {
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }

        body>div {
            padding: 20px 30px;
            width: 100%;
            /* float: left;
            width: 50%;
            padding: 20px 30px; */
        }
    </style>
</head>

<body>
    <div class="k_box_size section-content" >
        <h1 class="section-title">复杂表头/工具栏/分页/异步AJAX/行、单元格格式化--demo</h1>
        <div style="height:500px;" class="section-body clearfix;">
            <table id="datagrid"></table>
        </div>
    </div>
    <div  class="k_box_size section-content">
        <h1 class="section-title">树形表格--demo</h1>
        <div style="height:400px;" class="section-body clearfix;">
            <table id="treegrid"></table>
        </div>
    </div>
    <div  class="k_box_size section-content" style="background-color: #fff;">
        <h1 class="section-title">下分页栏，自定义分割线--demo</h1>
        <div style="height:500px" class="section-body clearfix">
            <table id="datagrid1"></table>
        </div>
    </div>
    <script type="text/javascript">
 
        var treeGrid;
        console.log(  encodeURIComponent("PDFS\d182bbf49778429a8f796f26d1c1f587\2.jpg"));
        function formatfn(val,data){
            val = val+"";
            return val === "1" ? "<span style='color:red'>禁用</span>":"启用";
        }
        var tabIns8;
        var cols = [
            [
            {
                "title": "标题3标题3标题3",
                "colspan": 3
            },
            {
                "title": "标题1标题1标题1",
                "colspan": 2,
                "rowspan": 2
            },
            {
                "title": "字段标题",
                "rowspan": 3,
                "field": "createTime"
            }
            ],
            [{
                "title": "标题",
                "colspan": 2
            },
            {
                "title": "标题AAA",
                "width": 100,
                "rowspan": 2,
                "sortable": true
            },
            {
                "title": "标题889",
                "width": 100,
                "colspan": 3,
                "sortable": true
            }
            ]
            ,
            [{
                    "title": "菜单名称",
                    "field": "menuName",
                    "width": 200,
                    "align": "left",
                    "sortable": false,
                    "formatter": ""
                },
                {
                    "title": "行为",
                    "field": "content",
                    "width": "100px",
                    "align": "left",
                    "sortable": true,
                    "formatter": "",
                    "openTip":true
                },
                {
                    "title": "操作人",
                    "field": "createUser",
                    "width": "100px",
                    "align": "center",
                    "sortable": true,
                    "formatter": "formatfn1"
                },                
                {
                    "title": "状态",
                    "field": "status",
                    "minWidth": "100px",
                    "align": "center",
                    "sortable": false,
                    "formatter": "formatfn"
                },
                {
                    "title": "数据3",
                    "field": "menuName",
                    "minWidth": "120px",
                    "align": "center",
                    "sortable": true,
                    "formatter": ""
                },
                {
                    "title": "字段标题",
                    "field": "createTime",
                    "width": "auto",
                    "align": "center"
                }
            ]
        ];
        var childrenBtns = [{
            "id": "line_btn_10",
            "text": "删除",
            "iconCls": "fa-trash",
            "params": {
                "cmd": "delete",
                "privilage": "1"
            },
            "visualable": true,
            "disabled": false,
            "click": function (prs) {
                alert(JSON.stringify(prs));
            }
        },
        {
            "id": "line_btn_11",
            "text": "更新",
            "color": "",            
            "params": {
                "cmd": "update",
                "privilage": "1"
            },
            "visualable": true,
            "disabled": false,
            "iconCls": "fa-doc-text"
        },
        {
            "id": "line_btn_12",
            "text": "管理子菜单",            
            "params": {
                "cmd": "update",
                "privilage": "1"
            },
            "visualable": true,
            "disabled": false,
            "iconCls": "fa-share-2"
        }
        ];

        var groupBTs = [
            // [
            //     {
            //     "text": "重新加载",
            //     "iconCls": "fa-search",
            //     "click": function (prs) {
            //         dg.reload({
            //             q: 123
            //         });
            //     }
            // }, {
            //     "text": "获取数据",
            //     "iconCls": "fa-file-word",
            //     "click": function (prs) {
            //         alert(JSON.stringify(dg.getData()));
            //     }
            // }],
            // [{
            //     "text": "刷新当前页",
            //     "iconCls": "fa-arrows-ccw",
            //     "click": function (prs) {
            //         dg.refresh();
            //     }
            // }, {
            //     "text": "删除",
            //     "iconCls": "fa-cancel-2",
            //     "click": function (prs) {
            //         alert("click2");
            //     }
            // }],
            // [{
            //     "text": "获取勾选的数据",
            //     "iconCls": "fa-ok-circled",
            //     "click": function (prs) {
            //         var data = dg.getCheckedData();
            //         alert(JSON.stringify(data));
            //     }
            // }, {
            //     "text": "获取勾选的id集合",
            //     "iconCls": "fa-cancel-2",
            //     "click": function (prs) {
            //         var data = dg.getCheckedId();
            //         alert(JSON.stringify(data));
            //     }
            // }],
            [{
                text:'获取选择数据',
                "iconCls": "fa-ok-circled",
                click:function(){
                    alert( JSON.stringify(dg.getCheckedData()));
                }
            }],
            [{
                "text": "其他",
                "iconCls": "fa-down",
                "children": childrenBtns
            }]
        ];


        var buttons = [
        {
            "color": "#005CE2",
            "disabled": false,
            "id": "line_btn_2",
            "text": "新增",
            "cmd": "add",
            "visualable": true,            
            "iconCls": "ui-icon-new-add",
            "params": {
                "privilage": "1",
                "cmd": "add"
            },
            "click": "addFn",
            "children":childrenBtns
        },
        {
            "color": "#12C658",
            "disabled": false,
            "id": "line_btn_4",
            "text": "编辑",
            "cmd": "update",
            "visualable": true,            
            "iconCls": "ui-icon-new-edit",
            "params": {
                "privilage": "1",
                "cmd": "update"
            },
            "click": "updateFn"
        },
        {
            "color": "#FF614B",
            "disabled": true,
            "id": "line_btn_6",
            "text": "删除",
            "cmd": "delete",
            "visualable": true,            
            "iconCls": "ui-icon-new-delete-controll",
            "params": {
                "privilage": "1",
                "cmd": "delete"
            },
            "click": "deleteFn"
        },
        {
            "color": "#7560FF",
            "disabled": false,
            "id": "line_btn_8",
            "text": "导出",
            "cmd": "export",
            "visualable": true,            
            "iconCls": "ui-icon-new-export",
            "params": {
                "privilage": "1",
                "cmd": "export"
            },
            "click": "exportFn"
        },
        {
            "color": "#3399FF",
            "disabled": false,
            "id": "line_btn_10",
            "text": "导入",
            "cmd": "import",
            "visualable": true,            
            "iconCls": "ui-icon-new-import",
            "params": {
                "privilage": "1",
                "cmd": "import"
            },
            "click": "importFn"
        },
        {
            "color": "#FD9D0D",
            "disabled": false,
            "id": "line_btn_12",
            "text": "复制",
            "cmd": "copy",
            "visualable": true,            
            "iconCls": "fa-paste",
            "params": {
                "privilage": "1",
                "cmd": "copy"
            },
            "click": "copyFn"
        }
    ];

        //console.log(JSON.stringify(tableData));

        $B.DomUtils.onDomLoaded(function () {
            var args = {
                data: undefined, // tableData,  treeData
                rows: cols, // treeCol cols
                isTree: false,
                title: "表格标题",
                methodsObject: "toolMethods",
                loadImd: true, //是否立即加载
                pageSize: 10,
                splitColLine:'k_table_td_v_line', // k_table_td_v_line、k_table_td_h_line k_table_td_all_line
                pgBtnNum: 5,
                fit2height: true,
                openExtendTr:true,//是否默认打开展开行
                oprCol: true, //是否需要操作列
                oprColWidth: 280, //定义操作列宽
                url: "table.json", // flag=datagrid datagridTree
                checkBox: true, //是否需要复选框               
                idField: 'id', //id字段名称
                pgposition: "both", //both bottom top none
                iconCls: 'fa-table',
                toolbar: groupBTs, // buttons groupBTs
                topBtnStyle:{
                    methodsObject:'tableMethods',
                    style: 'normal', //plain   plain / min  / normal /  big             
                    showText: true
                },
                trBtnStyle:{
                    methodsObject:'trMethods',
                    style: 'plain', //plain   plain / min  / normal /  big             
                    showText: true
                },                                 
                sortField: {
                    'order_index': 'desc',
                    "fieldName": 'asc'
                }, //默认排序字段
                setParams: function () { //设置查询时候附加的参数
                    return {
                        "p": "p1"
                    };
                },
                onDbClickRow: function (data) { //双击一行时触发 fn(rowData)
                    alert("onDbClickRow " + JSON.stringify(data) );
                },
                onClickCell: function (field, data) { //单击一个单元格时触发fn(field, value)
                    alert("onClickCell " + field + "  " + JSON.stringify(data));
                },
                onCheck: function (data) { //复选事件 
                    alert("onCheck  data=" + JSON.stringify(data));
                },
                onLoaded: function (data) { //加载完成回调
                    console.log("onLoaded" + JSON.stringify(data));
                },
                onRowRender: function (tr ,data,rowIdx) { //行渲染事件
                    if (rowIdx === 2) {
                        var childs = $B.DomUtils.children(tr);
                        $B.DomUtils.css(childs,{"background-color":"#EAD1FF"});
                        for(let i =0 ;i < childs.length ;i++ ){
                            let td = childs[i];
                            $B.DomUtils.css(td.firstChild.firstChild,{color:"#FF0005"});
                        }
                        return true; //返回true则开启行的展开功能
                    }
                },
                onTrExtended:function(data,extTr,isShow){
                    if(isShow){
                        var json = JSON.stringify(data);
                        extTr.firstChild.innerHTML = "<p>详情:"+json+"</p>";
                    }                    
                },
                formatTipFn :function(fieldName,data,colIdx){
                    console.log("formatTIpN ",fieldName,data,colIdx);
                    if(fieldName === "content"){
                        return {
                            text:"<div><h6 style='color: #FFFFFF'>强制开启提示：</h6><p style='color: #FFFFFF'>列col配置通过openTip参数开启提示！</p></div>",
                            color:"#056C0A"
                        };
                    }
                    if(colIdx === "1"){
                        return "#088927";
                    }else if(colIdx=== "5"){                
                        return {
                            text:"<div><h6 style='color: #FFFFFF'>提示：</h6><p style='color: #FFFFFF'>【formatTipFn】自定义UI-显示内容！</p></div>",
                            color:"#2E55E5"
                        };
                    }
                }
            };
            dg = new $B.Table("#datagrid", args);

            var treeCol = [{
                "title": "菜单名称",
                "field": "menuText",
                "align": "left",
                "sortable": true,
                "formatter": ""
            },
            {
                "title": "params",
                "field": "params",
                "align": "center",
                "formatter": ""
            },
            {
                "title": "controller",
                "field": "controller",
                "align": "center",
                "formatter": "formatfn1"
            },
            {
                "title": "状态",
                "field": "isEnable",
                "width": "100px",
                "align": "center",
                "formatter": ""
            },
            {
                "title": "创建时间",
                "field": "createTime",
                "width": "auto",
                "align": "center",
                "formatter": ""
            }
        ];

            let tcols =  [
                {
                "text": "重新加载",
                "iconCls": "fa-search",
                color: '#8B7EFF',
                "click": function (prs) {
                    
                }
            }, {
                "text": "获取数据",
                "iconCls": "fa-file-word",
                "click": function (prs) {
                    alert(JSON.stringify(treeGrid.getCheckedData()));
                }
            }]

            treeGrid = new $B.Table("#treegrid",{
                //data: treeData, // tableData,  treeData
                rows: treeCol, // treeCol cols
                isTree: true,
                title: "树形表格",
                methodsObject: "toolMethods",
                loadImd: true, //是否立即加载
                splitColLine:'k_table_td_none_line', // k_table_td_v_line、k_table_td_h_line k_table_td_all_line、k_table_td_none_line
                fit2height: true,
                oprCol: true, //是否需要操作列
                oprColWidth: 200, //定义操作列宽
                url: "treetable.json", // flag=datagrid datagridTree
                checkBox: true, //是否需要复选框               
                idField: 'id', //id字段名称
                iconCls: 'fa-doc-text',
                toolbar: tcols, // buttons groupBTs
                topBtnStyle:{
                    methodsObject:'tableMethods',
                    style: 'min', //plain   plain / min  / normal /  big             
                    showText: true
                },
                trBtnStyle:{
                    methodsObject:'trMethods',
                    style: 'plain', //plain   plain / min  / normal /  big             
                    showText: true
                },                                 
                sortField: {
                    'order_index': 'desc',
                    "fieldName": 'asc'
                }, //默认排序字段
                setParams: function () { //设置查询时候附加的参数
                    return {
                        "p": "p1"
                    };
                },
                onDbClickRow: function (data) { //双击一行时触发 fn(rowData)
                    alert("onDbClickRow " + JSON.stringify(data) );
                },
                onClickCell: function (field, data) { //单击一个单元格时触发fn(field, value)
                    alert("onClickCell " + field + "  " + JSON.stringify(data));
                },
                onCheck: function (data) { //复选事件 
                    alert("onCheck  data=" + JSON.stringify(data));
                },
                onLoaded: function (data) { //加载完成回调
                    console.log("onLoaded" + JSON.stringify(data));
                },
                onRowRender: function (tr ,data,rowIdx) { //行渲染事件
                    if (rowIdx %  2 === 0) {
                        var childs = $B.DomUtils.children(tr);
                        $B.DomUtils.css(childs,{"background-color":"#E5FAE5"});
                        for(let i =0 ;i < childs.length ;i++ ){
                            let td = childs[i];
                            $B.DomUtils.css(td.firstChild.firstChild,{color:"#C9AA0D"});
                        }
                    }
                    if(rowIdx === 0){
                        return true;
                    }
                },
                onTrExtended:function(data,extTr,isShow){
                    if(isShow){
                        var json = JSON.stringify(data);
                        extTr.firstChild.innerHTML = "<p>1、行展开功能是通过 opts.onRowRender(tr ,data,rowIdx) 的返回值开启的!</p><p>2、通过opts.onTrExtended(data,extTr,isShow)可对展开行进行数据填充</p>";
                    }
                    
                }
            });
       
            treeCol = [{
                "title": "菜单名称",
                "field": "menuName",
                "align": "left",
                "sortable": true,
                "formatter": ""
            },
            {
                "title": "params",
                "field": "content",
                "align": "center",
                "formatter": ""
            },
            {
                "title": "controller",
                "field": "controller",
                "align": "center",
                "formatter": "formatfn1"
            },
            {
                "title": "状态",
                "field": "isEnable",
                "width": "100px",
                "align": "center",
                "formatter": ""
            },
            {
                "title": "创建时间",
                "field": "createTime",
                "width": "auto",
                "align": "center",
                "formatter": ""
            }
        ];

            args = {
                data: undefined, // tableData,  treeData
                rows: treeCol, // treeCol cols
                isTree: false,
                title: "表格标题",               
                loadImd: true, //是否立即加载
                pageSize: 10,
                splitColLine:'k_table_td_h_line_1', // k_table_td_v_line、k_table_td_h_line k_table_td_all_line
                pgBtnNum: 5,
                fit2height: true,               
                oprCol: true, //是否需要操作列
                oprColWidth: 280, //定义操作列宽
                url: "table1.json", // flag=datagrid datagridTree
                checkBox: true, //是否需要复选框               
                idField: 'id', //id字段名称
                pgposition: "both", //both bottom top none
                iconCls: 'fa-table',
                toolbar: groupBTs, // buttons groupBTs
                topBtnStyle:{
                    methodsObject:'tableMethods',
                    style: 'normal', //plain   plain / min  / normal /  big             
                    showText: true
                },
                trBtnStyle:{
                    methodsObject:'trMethods',
                    style: 'plain', //plain   plain / min  / normal /  big             
                    showText: true
                },                                 
                sortField: {
                    'order_index': 'desc',
                    "fieldName": 'asc'
                }, //默认排序字段
                setParams: function () { //设置查询时候附加的参数
                    return {
                        "p": "p1"
                    };
                },
                onDbClickRow: function (data) { //双击一行时触发 fn(rowData)
                    alert("onDbClickRow " + JSON.stringify(data) );
                },
                onClickCell: function (field, data) { //单击一个单元格时触发fn(field, value)
                    alert("onClickCell " + field + "  " + JSON.stringify(data));
                },
                onCheck: function (data) { //复选事件 
                    alert("onCheck  data=" + JSON.stringify(data));
                },
                onLoaded: function (data) { //加载完成回调
                    console.log("onLoaded" + JSON.stringify(data));
                },
                onTrExtended:function(data, $extTr, isShow){
                    if(isShow){
                        console.log($extTr,data);
                        $B.DomUtils.append($extTr.firstChild,"<div style='padding:12px 14px;line-height:18px;color:#217534'>"+JSON.stringify(data)+"</div>");
                    }
                }
            };
       
           tabIns8 = new $B.Table("#datagrid1", args);
        });
        window.trMethods = {
            lineOpenFn:function(arg){
                let pel = this.parentNode;
                while(pel){
                    if(pel.tagName === "TR"){
                        break;
                    }
                    pel = pel.parentNode;
                }
                let $txt = this.lastChild;
                if($txt.innerText === "展开"){
                    $txt.innerText = "收起";
                }else{
                    $txt.innerText = "展开";
                }              
                tabIns8.openInner(pel);
            }
        };
    </script>

</body>

</html>